<template>
  <div class="time-picker-box">
    <span>*</span>
    <span>{{pickerTitle}}</span>
    <span>
      <van-field
        readonly
        clickable
        placeholder="请选择 （点击出发弹窗）"
        :value="currentTime.time"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-datetime-picker
          type="datehour"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
    </span>
  </div>
</template>
<script>
export default {
  props: {
    dateTime: {
      type: Object,
      default: ()=> ({
        time: '',
      }),
    },
    title: {
      type: String,
      default: '开始时间',
    },
  },
  data() {
    return {
      pickerTitle: this.title,
      currentTime: this.dateTime,
      showPicker: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
    }
  },
  methods: {
    onConfirm(val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`
      }
      this.currentTime.time = `${year}-${month}-${day} ${hour}:${minute}`
      this.$emit('saveValue', this.currentTime.time)
      this.showPicker = false
    },
  },
}
</script>
<style lang="scss" scoped>
.time-picker-box {
  position: relative;
  height: 70px;
  margin-bottom: 5px;
  background: #ffffff;
  span {
    position: absolute;
    &:first-child {
      top: 10px;
      left: 20px;
      color: red;
      font-size: 13px;
    }
    &:nth-child(2) {
      top: 10px;
      left: 36px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8c97b2;
    }
    &:nth-child(3) {
      left: 20px;
      bottom: 0px;
      ::v-deep .van-cell {
        background-color: transparent;
      }
      ::v-deep .van-field__control {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #002170;
      }
      ::v-deep .van-ellipsis {
        color: #2A529F;
      }
    }
  }
}
</style>